<template>
  <el-dialog
      v-model="dialogVisible"
      title="商品分类详情"
      width="600px"
      destroy-on-close
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="名称">{{ category.name }}</el-descriptions-item>
      <el-descriptions-item label="级别">
        <span v-if="category.level === 1">一级</span>
        <span v-else-if="category.level === 2">二级</span>
        <span v-else style="color: gold">未知</span>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <span v-if="category.delStatus === 1" style="color:blue">使用中</span>
        <span v-else-if="category.delStatus == 9" style="color:red">已停用</span>
        <span v-else style="color: gold">未知</span>
      </el-descriptions-item>
      <el-descriptions-item v-if="category.parent" label="父分类">{{ category.parent.name }}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, toRefs} from "vue";

const data = reactive({
  dialogVisible: false, // 控制对话框的显示状态
  category: {
    name: "笔记本",
    parentName: "数码电子",
    level: '2',
    status: '1',
    delStatus: 1,
  },
});
let {dialogVisible, category} = toRefs(data);
//暴露dialogVisible,父组件可以直接使用
defineExpose({
  dialogVisible,
  category
});
</script>